"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Platform } from "react-native"
import { theme } from "../../constants/theme"
import { WordDetailSheet } from "./WordDetailSheet"

// 前缀数据
const PREFIX_DATA = [
    { prefix: "ab-", count: 125, meaning: "分离；相反" },
    { prefix: "re-", count: 125, meaning: "再次；重新" },
    { prefix: "un-", count: 98, meaning: "不；非；取消" },
    { prefix: "in-", count: 87, meaning: "不；进入" },
    { prefix: "dis-", count: 76, meaning: "不；除去；分开" },
    { prefix: "en-", count: 65, meaning: "使...；进入" },
    { prefix: "pre-", count: 54, meaning: "在...之前；预先" },
    { prefix: "pro-", count: 48, meaning: "向前；支持" },
    { prefix: "de-", count: 43, meaning: "除去；向下" },
    { prefix: "mis-", count: 39, meaning: "错误；不良" },
    { prefix: "co-", count: 37, meaning: "共同；一起" },
    { prefix: "anti-", count: 35, meaning: "反对；防止" },
    { prefix: "inter-", count: 33, meaning: "在...之间；相互" },
    { prefix: "over-", count: 31, meaning: "过度；超过" },
    { prefix: "sub-", count: 29, meaning: "在...之下；次要的" },
    { prefix: "trans-", count: 27, meaning: "穿过；转变" },
    { prefix: "super-", count: 25, meaning: "超级；超过" },
    { prefix: "semi-", count: 23, meaning: "半；部分" },
    { prefix: "under-", count: 21, meaning: "在...之下；不足" },
    { prefix: "non-", count: 19, meaning: "不；非" },
    { prefix: "fore-", count: 17, meaning: "在...之前；预先" },
    { prefix: "counter-", count: 15, meaning: "相反；对抗" },
    { prefix: "bi-", count: 13, meaning: "两个；两倍" },
    { prefix: "ex-", count: 12, meaning: "前任的；外部" },
    { prefix: "mono-", count: 11, meaning: "单一；一个" },
    { prefix: "multi-", count: 10, meaning: "多；多种" },
]

// 示例词数据
const PREFIX_EXAMPLES = {
    "ab-": [
        {
            word: "absolute",
            phonetic: "/ˈæbsəluːt/",
            meaning: "完全的；绝对的",
            explanation: "：抓着一个东西不松开，就是让他固定不变，也就是让他成为确定的即绝对的",
            parts: [
                {
                    text: "ab",
                    type: "prefix",
                    meaning: "不",
                    etymology: '来源于拉丁语前缀ab-，表示"分离，脱离；相反；加强意义"',
                },
                {
                    text: "solut",
                    type: "root",
                    meaning: "放松",
                    etymology: '来源于拉丁语动词solutus，表示"解开，放松；溶解"',
                },
                {
                    text: "e",
                    type: "suffix",
                    meaning: "动词结尾",
                },
            ],
        },
        {
            word: "absorb",
            phonetic: "/əbˈzɔːrb/",
            meaning: "吸收；吸引；使专心",
            explanation: "：从某处吸走，表示吸收或吸引",
            parts: [
                {
                    text: "ab",
                    type: "prefix",
                    meaning: "离开，从...离开",
                    etymology: '来源于拉丁语前缀ab-，表示"分离，脱离"',
                },
                {
                    text: "sorb",
                    type: "root",
                    meaning: "吸收",
                    etymology: '来源于拉丁语sorbere，表示"吸收，吞下"',
                },
            ],
        },
        {
            word: "abnormal",
            phonetic: "/æbˈnɔːrməl/",
            meaning: "反常的；不规则的",
            explanation: "：不符合规则或标准的，表示异常或反常",
            parts: [
                {
                    text: "ab",
                    type: "prefix",
                    meaning: "相反，不",
                    etymology: '来源于拉丁语前缀ab-，表示"相反，不"',
                },
                {
                    text: "normal",
                    type: "root",
                    meaning: "正常的，标准的",
                    etymology: '来源于拉丁语normalis，表示"符合规则的"',
                },
            ],
        },
    ],
    "re-": [
        {
            word: "rebuild",
            phonetic: "/riːˈbɪld/",
            meaning: "重建；改建",
            explanation: "：重新建造一个东西，就是再建造一次",
            parts: [
                {
                    text: "re",
                    type: "prefix",
                    meaning: "再次，重新",
                    etymology: '来源于拉丁语前缀re-，表示"再次，重新，向后"',
                },
                {
                    text: "build",
                    type: "root",
                    meaning: "建造，建筑",
                },
            ],
        },
        {
            word: "rewrite",
            phonetic: "/riːˈraɪt/",
            meaning: "重写；改写",
            explanation: "：重新写一遍，修改或改进已写的内容",
            parts: [
                {
                    text: "re",
                    type: "prefix",
                    meaning: "再次，重新",
                    etymology: '来源于拉丁语前缀re-，表示"再次，重新"',
                },
                {
                    text: "write",
                    type: "root",
                    meaning: "写，书写",
                },
            ],
        },
        {
            word: "return",
            phonetic: "/rɪˈtɜːrn/",
            meaning: "返回；归还",
            explanation: "：转回来，表示回到原来的地方或状态",
            parts: [
                {
                    text: "re",
                    type: "prefix",
                    meaning: "回，向后",
                    etymology: '来源于拉丁语前缀re-，表示"向后，返回"',
                },
                {
                    text: "turn",
                    type: "root",
                    meaning: "转，转动",
                },
            ],
        },
    ],
    "un-": [
        {
            word: "unhappy",
            phonetic: "/ʌnˈhæpi/",
            meaning: "不快乐的；不幸福的",
            explanation: "：不快乐的状态，表示缺乏幸福感",
            parts: [
                {
                    text: "un",
                    type: "prefix",
                    meaning: "不，非",
                    etymology: '来源于古英语前缀un-，表示"不，相反"',
                },
                {
                    text: "happy",
                    type: "root",
                    meaning: "快乐的，幸福的",
                },
            ],
        },
        {
            word: "unlock",
            phonetic: "/ʌnˈlɒk/",
            meaning: "开锁；解锁",
            explanation: "：打开锁，使不再锁住",
            parts: [
                {
                    text: "un",
                    type: "prefix",
                    meaning: "相反，取消",
                    etymology: '来源于古英语前缀un-，表示"相反，取消"',
                },
                {
                    text: "lock",
                    type: "root",
                    meaning: "锁，锁住",
                },
            ],
        },
    ],
    "in-": [
        {
            word: "inactive",
            phonetic: "/ɪnˈæktɪv/",
            meaning: "不活跃的；不活动的",
            explanation: "：不活跃的状态，缺乏活动或行动",
            parts: [
                {
                    text: "in",
                    type: "prefix",
                    meaning: "不，非",
                    etymology: '来源于拉丁语前缀in-，表示"不，进入"',
                },
                {
                    text: "active",
                    type: "root",
                    meaning: "活跃的，积极的",
                },
            ],
        },
        {
            word: "include",
            phonetic: "/ɪnˈkluːd/",
            meaning: "包括；包含",
            explanation: "：关闭在内，表示包含或包括某物",
            parts: [
                {
                    text: "in",
                    type: "prefix",
                    meaning: "向内，在内",
                    etymology: '来源于拉丁语前缀in-，表示"在内，向内"',
                },
                {
                    text: "clude",
                    type: "root",
                    meaning: "关闭",
                    etymology: '来源于拉丁语claudere，表示"关闭"',
                },
            ],
        },
    ],
}

export default function PrefixTab() {
    const [selectedPrefix, setSelectedPrefix] = useState<string | null>(null)

    const handlePrefixPress = (prefix: string) => {
        setSelectedPrefix(prefix)
    }

    return (
        <View style={styles.container}>
            {/* 前缀统计 */}
            <View style={styles.statsContainer}>
                <Text style={styles.statsText}>
                    共 <Text style={styles.statsHighlight}>{PREFIX_DATA.length}</Text> 个常用前缀
                </Text>
            </View>

            {/* 前缀列表 */}
            <ScrollView
                style={styles.scrollView}
                contentContainerStyle={styles.scrollContent}
                showsVerticalScrollIndicator={false}
            >
                <View style={styles.prefixGrid}>
                    {PREFIX_DATA.map((item) => (
                        <TouchableOpacity
                            key={item.prefix}
                            style={styles.prefixItem}
                            onPress={() => handlePrefixPress(item.prefix)}
                        >
                            <View style={styles.prefixContent}>
                                <Text style={styles.prefixText}>{item.prefix}</Text>
                                <View style={styles.countBadge}>
                                    <Text style={styles.countText}>{item.count}</Text>
                                </View>
                            </View>
                        </TouchableOpacity>
                    ))}
                </View>
            </ScrollView>

            {/* Word Detail Sheet */}
            <WordDetailSheet
                visible={!!selectedPrefix}
                onClose={() => setSelectedPrefix(null)}
                affix={selectedPrefix || ""}
                type="prefix"
                examples={selectedPrefix && PREFIX_EXAMPLES[selectedPrefix] ? PREFIX_EXAMPLES[selectedPrefix] : []}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    statsContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    statsText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    statsHighlight: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    scrollView: {
        flex: 1,
    },
    scrollContent: {
        padding: theme.spacing.lg,
        paddingTop: 0,
    },
    prefixGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        justifyContent: "space-between",
    },
    prefixItem: {
        width: "31%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.medium,
        padding: theme.spacing.md,
        marginBottom: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.3,
                shadowRadius: 3,
            },
            android: {
                elevation: 2,
            },
        }),
    },
    prefixContent: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.xs,
    },
    prefixText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
    },
    countBadge: {
        backgroundColor: `${theme.colors.primary.default}15`,
        borderRadius: theme.borderRadius.small,
        paddingHorizontal: 6,
        paddingVertical: 2,
    },
    countText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    meaningText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
    },
})

